<template>
  <div class="contain">
    <div class="button">
      <el-button @click="dialogVisible = true" type="primary">添加角色</el-button>
    </div>
    <div class="list">
      <el-table :data="employeeList" style="width: 100%">
        <el-table-column prop="name" label="角色" width="180">
        </el-table-column>

        <el-table-column prop="state" label="启用">
          <template v-slot="{row}">
            <span>{{row.state===1 ? '已启用' :row.state===0 ? '未启用' :'无'  }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="description" type="text" label="描述" width="180">

        </el-table-column>
        <el-table-column label="操作">
          <span>
            <el-button type="text" size="mini">分配权限</el-button>
            <template :v-slot="row">
              <span v-if="row.isEdit">
                <button>确认</button>
                <button>取消</button>
              </span>
              <span v-else>
                <el-button @click=editRow(row) type="text" size="mini">编辑 </el-button>
              </span>
            </template>
            <el-button type="text" size="mini">删除</el-button>
          </span>
        </el-table-column>
      </el-table>
    </div>
    <span class="pages">
      <el-pagination :page-size="pageParams.pagesize" :current-page="pageParams.page" :total="pageParams.total"
        layout="prev,pager,next" @current-change="changePage" />
    </span>
    <!-- 这是弹窗 -->
    <div>
      <el-dialog title="新增角色" :visible.sync="dialogVisible" width="30%">
        <el-form ref="formdata" :model="formdata" :rules="rules" class="dialog">
          <el-form-item label="名称">
            <el-input v-model="formdata.name"></el-input>
          </el-form-item>
          <el-form-item label="启用">
            <el-switch v-model="formdata.state" :active-value=1 :inactive-value=0 size="mini">
            </el-switch>

          </el-form-item>
          <el-form-item label="描述">
            <el-input style="width:300px;" v-model="formdata.description" type="textarea" :rows="4" />
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="btnok">确 定</el-button>
          <el-button @click="cancelDialogVisible">取 消</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
      <script>
import { getEmployee, addrole } from '@/api/role'
import { flat } from 'mock/user'
export default {
  data() {
    return {
      dialogVisible: false,
      employeeList: [],
      tableData: [{
        id: 0,
        name: "string",
        description: "string",
        state: 0,
      }],
      pageParams: {
        page: 1,//初始值
        pagesize: 5,
        total: 0//初始值

      }, formdata: {
        name: '',
        state: 0,
        description: ''
      },
      rules: {
        name: [{ required: true, message: '角色名称缺失', trigger: 'blur' }],
        description: [{ required: true, message: '描述缺失', trigger: 'blur' }]
      }
    }
  }, created() {
    this.getEmployeeList()
  },
  methods: {
    async getEmployeeList() {
      const { res, total } = await getEmployee()
      this.employeeList = res.rows
      this.pageParams.total = total
      this.employeeList.foreach(item => {
        this.$set(item, 'isEdit', flase)
      })

    }, changePage(newPage) {
      this.pageParams.page = newPage
      this.getEmployeeList()
    }, async btnok() {
      this.$refs.formdata.validate(async (valid) => {
        if (valid) {
          await this.addrole(this.formdata)
          this.cancelDialogVisible()
          this.getEmployeeList()
        } else {
          console.error('表单验证失败')
        }
      })

    }, async addrole(formdata) {
      const res = await addrole(formdata)
      this.formdata = res

    }, cancelDialogVisible() {
      this.dialogVisible = false
      this.formdata = {
        name: '',
        state: 0,
        description: ''
      }
    }
  }
}
      </script>

  <style>
.list {
  display: flex;
  justify-content: space-between; /* 使标题均匀分布 */
}
.pages {
  margin-left: 10px;
  text-align: center;
}
.button {
  width: 100%;
  height: 50px;
}
.dialog {
  width: 200px;
}
.dialog-footer {
  display: flex;
  align-items: center; /* 垂直居中 */
  margin-left: 80px;
}
</style>

    


